<template>
  <div class="main">
    <div class="input">
      <input type="password"
             placeholder="请输入原密码"
             class="el-input__inner"
             v-model="pd1"
             @blur="checkOldPd()" />
      <span class="tip"
            v-if="old===1">原密码输入有误</span>
      <span class="tip"
            v-if="old===2"><i class="el-icon-success"></i></span>
    </div>
    <div class="input">
      <input type="password"
             placeholder="请输入新密码"
             class="el-input__inner"
             v-model="pd2"
             @blur="confirmNewPd()" />
      <span class="tip"
            v-if="pd2!==''"><i class="el-icon-success"></i></span>
    </div>
    <div class="input">
      <input type="password"
             placeholder="确认新密码"
             class="el-input__inner"
             v-model="pd3"
             @blur="confirmNewPd()" />
      <span class="tip"
            v-if="same===1">两次密码不一致</span>
      <span class="tip"
            v-if="same===2"><i class="el-icon-success"></i></span>
    </div>
    <div class="button">
      <el-button @click="changePd"
                 type="primary">保存修改</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ChangePd',
  data () {
    return {
      oldPd: '',
      pd1: '',
      pd2: '',
      pd3: '',
      old: 0,
      same: 0
    }
  },
  mounted () {
    this.getPd()
  },
  methods: {
    checkOldPd () {
      var self = this
      if (self.pd1 === '') self.old = 0;
      else if (self.oldPd !== self.pd1) self.old = 1;
      else self.old = 2;
    },
    confirmNewPd () {
      var self = this
      if (self.pd2 === '' || self.pd3 === '') self.same = 0;
      else if (self.pd2 !== self.pd3) self.same = 1;
      else self.same = 2;
    },
    getPd () {
      let self = this
      self.$ajax({
        method: 'POST',
        url: '/view/getPd/',
        dataType: 'json',
        data: {
          'name': sessionStorage.getItem('name'),
        }
      }).then(function (response) {
        self.oldPd = response.data.pd;
      }).catch(function (err) {
        console.log(err);
      })
    },
    changePd: function () {
      var self = this
      if (self.old === 2 && self.same == 2) {
        self.$ajax({
          method: 'POST',
          url: '/view/changePd/',
          dataType: 'json',
          data: {
            'name': sessionStorage.getItem('name'),
            'password': self.pd2
          }
        }).then(function (response) {
          console.log(response);
          self.$message({ type: 'success', message: '密码修改成功,请重新登录' });
          self.$router.push({ path: '/regLogin' })
        }).catch(function (err) {
          self.$message.error(err);
        })
      }
      else self.$message.error('请检测输入信息');
    }
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 6rem
  height 5rem
  margin 0.5rem auto
  .input
    position relative
    width 5rem
    height 0.3rem
    margin 0.4rem auto
    font-size 0.12rem
    input
      display inline-block
      width 3rem
    .tip
      position absolute
      left 3.9rem
      width 1rem
      line-height 0.4rem
      color red
      font-size 0.12rem
      margin-left 0.1rem
      .el-icon-success
        color #85ce61
        font-size 0.14rem
  .button
    width 3rem
    height 0.4rem
    margin 0 auto
    display flex
    button
      flex 1
      border-radius 0.1rem
</style>